<template>
    <div >
        <el-row  style="height: 150px;background-color:#ffffff;margin-bottom:10px;border-radius:5px">
            <el-col :span="24">
             <el-row style="height:40px;line-height:40px;margin-left:20px">
               <el-col :span="24"><div style="border-left: 3px solid #409EFF;margin-top:5px;padding-left:10px">项目概览</div></el-col>
             </el-row>
            <el-row>
             <el-col :span="6">
               <table style=" margin:20px 30px">
                 <tr>
                    <td rowspan="2" style="background:rgb(64, 158, 255,0.3);width:60px; height:60px;">
                       <i class="el-icon-s-cooperation" style="margin-left: 15px;font-size:30px;color:rgb(64, 158, 255)"></i>
                    </td>
                    <td>总项目数</td> 
                 </tr>
                 <tr> 
                   <td>{{ projectObj.total }}</td> 
                 </tr>
               </table>
     
            </el-col>
            
            <el-col :span="6">
             <table style=" margin:20px 30px">
               <tr>
                  <td rowspan="2" style="background:rgb(128, 183, 238,0.3);width:60px; height:60px;">
                     <i class="el-icon-refresh" style="margin-left: 15px;font-size:30px;color:rgb(128, 183, 238)"></i>
                  </td>
                  <td>进行中</td> 
               </tr>
               <tr> 
                 <td>{{projectObj.unDoneNum}}</td> 
               </tr>
             </table>
            </el-col>
            <el-col :span="6">
             <table style=" margin:20px 30px">
               <tr>
                  <td rowspan="2" style="background:rgb(255, 115, 64,0.3);width:60px; height:60px;">
                     <i class="el-icon-close-notification" style="margin-left: 15px;font-size:30px;color:rgb(255, 115, 64)"></i>
                  </td>
                  <td>已延期</td> 
               </tr>
               <tr> 
                 <td>{{projectObj.overdueNum}}</td> 
               </tr>
             </table>
            </el-col>
            <el-col :span="6">
             <table style=" margin:20px 30px">
               <tr>
                  <td rowspan="2" style="background:rgb(19, 241, 34,0.3);width:60px; height:60px;">
                     <i class="el-icon-switch-button" style="margin-left: 15px;font-size:30px;color:rgb(19, 241, 34)"></i>
                  </td>
                  <td>已关闭</td> 
               </tr>
               <tr> 
                 <td>{{projectObj.doneNum}}</td> 
               </tr>
             </table>
            </el-col>
     
            </el-row>
            </el-col>
             
         </el-row>
         <el-row :gutter="3">
           <el-col :span="8">
              <el-row :gutter="3">
                 <el-col :span="12">
                     <div class="total_card_num" @click="handleClickTaskList(1)"> 
                       <el-row>
                         <el-col :span="24" class="card_item_title">总任务</el-col>
                       </el-row>
                       <el-row>
                         <el-col :span="24" class="card_item_num" style="color: #409EFF;">{{ taskObj.total }}</el-col>
                       </el-row>
                       <el-row >
                         <el-col :span="24" class="card_num_bottom" style="background-color: #409EFF;"></el-col>
                       </el-row>
                     </div> 
                 </el-col>
                 <el-col :span="12">
                   <el-row >
                     <el-col :span="24">
                       <div class="total_card_num" @click="handleClickTaskList(2)"> 
                         <el-row>
                           <el-col :span="24" class="card_item_title">进行中</el-col>
                         </el-row>
                         <el-row>
                           <el-col :span="24" class="card_item_num" style="color: #84e3fa;">{{ taskObj.unDoneNum }}</el-col>
                         </el-row>
                         <el-row >
                           <el-col :span="24" class="card_num_bottom" style="background-color: #84e3fa;"></el-col>
                         </el-row>
                       </div> 
                     </el-col>
                   </el-row>
                 </el-col>
              </el-row>
              <el-row :gutter="3">
               <el-col :span="12">
                 <el-row >
                   <el-col :span="24">
                     <div class="total_card_num" @click="handleClickTaskList(3)"> 
                       <el-row>
                         <el-col :span="24" class="card_item_title">超期</el-col>
                       </el-row>
                       <el-row>
                         <el-col :span="24" class="card_item_num" style="color: #f4a30b;">{{ taskObj.overdueNum }}</el-col>
                       </el-row>
                       <el-row >
                         <el-col :span="24" class="card_num_bottom" style="background-color: #f4a30b;"></el-col>
                       </el-row>
                     </div> 
                   </el-col>
                 </el-row>
               </el-col>
               <el-col :span="12">
                 <el-row >
                   <el-col :span="24">
                     <div class="total_card_num" @click="handleClickTaskList(4)"> 
                       <el-row>
                         <el-col :span="24" class="card_item_title">已完成</el-col>
                       </el-row>
                       <el-row>
                         <el-col :span="24" class="card_item_num" style="color: #0df268;">{{ taskObj.doneNum }}</el-col>
                       </el-row>
                       <el-row >
                         <el-col :span="24" class="card_num_bottom" style="background-color: #0df268;"></el-col>
                       </el-row>
                     </div> 
                   </el-col>
                 </el-row>
               </el-col>
            </el-row>
           </el-col>
           <el-col :span="16">
             <el-card shadow="never" style="height:265px">
               <el-table border v-loading="loading" :data="taskList"  :border="false"  header-cell-class-name="table_header_row">
                 <el-table-column label="项目编码" align="left" width="150"   prop="projectNo">
                   <!-- <template slot-scope="scope">
                     <a style="color: cornflowerblue;" @click="openViewDetail(scope.row)">{{ scope.row.projectNo }}</a>
                   </template> -->
                 </el-table-column>
                 <el-table-column label="项目名称" align="center" width="150" prop="projectName" /> 
                 <el-table-column label="任务名称" align="center" prop="nodeName" />
                 <el-table-column label="责任人" align="center" width="150" prop="nickName" /> 
                   
               </el-table>
               <pagination v-show="total > 0" :total="total" :page-sizes="[3]" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                 @pagination="handleTaskList" />
             </el-card>
           </el-col>
           
         </el-row>
     
     
    </div>
</template>

<script>
import * as echarts from 'echarts';
import $ from 'jquery';
import { getProjectLevelCount, getProjectCustom, getProjectLevelTest } from "@/api/business/project"
import {totalTaskForUser,getTaskList}  from "@/api/projectManage/task";
import {totalProjectForUser}  from "@/api/projectManage/projectList";
export default {
    name: 'Model1',
    data() {
        return {
            checkboxGroup2: [],
            customer: [
                // 'Acer', 'GBT', 'inno', 'IO', '泰坦'
            ],
            count: 1048,
            param: {
                customs: []
            },
            taskObj:{},
            projectObj:{},
            loading:false,
            taskList:[],
            total:0,
            queryParams:{
                pageNum:1,
                pageSize:3
            }
        };
    },
    computed: {
    },
    watch: {
        checkboxGroup2: function (newVal, oldVal) {
            let ocount = oldVal.length
            let ncount = newVal.length
            // console.log('new',newVal,ncount)
            // console.log('old',oldVal,ocount)
            if (ocount == 1 && ncount == 0) {
                this.checkboxGroup2 = this.customer
            }
        }
    },
    created() {
        this.getProjectCustomerDate()
        this.handleTotalTaskForUser();
        this.handleTotalProjectForUser();
    },
    destroyed() {

    },
    mounted() {
        this.getProjectLevelDate()
        this.getProjectLevelTestDate();
    },
    methods: {


        handleTotalTaskForUser(){
            totalTaskForUser('0').then(response=>{
                this.taskObj = response.data;
            })
        },

        handleTotalProjectForUser(){
            totalProjectForUser('0').then(response=>{
                this.projectObj = response.data;
            })
        },

        handleClickTaskList(flag){
            this.queryParams.temp=flag;
            this.handleTaskList();
        },

        handleTaskList(){ 
            this.loading = true;
            getTaskList(this.queryParams).then(response => {
                this.taskList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        initEChart1(date1) {

            var extension = function (mychart) {
                //判断是否创建过div框,如果创建过就不再创建了
                var id = document.getElementById("extension");
                if (!id) {
                    var div = "<div id = 'extension' sytle=\"display:none\"></div>";
                    $("html").append(div);
                }

                mychart.on("mouseover", function (params) {
                    if (params.componentType == "xAxis") {
                        $("#extension")
                            .css({
                                position: "absolute",
                                color: "#555",
                                border: "solid 1px #333",
                                "font-family": "Arial",
                                "font-size": "14px",
                                padding: "5px",
                                display: "inline",
                            })
                            .text(params.value);

                        $("html").mousemove(function (event) {
                            var xx = event.pageX - 30;
                            var yy = event.pageY + 20;
                            $("#extension").css("top", yy).css("left", xx);
                        });
                    }
                });

                mychart.on("mouseout", function (params) {
                    if (params.componentType == "xAxis") {
                        $("#extension").css("display", "none");
                    }
                });
            };

            var myChart1 = echarts.init(document.getElementById('chart1'))
            const option1 = {
                title: {
                    text: 'bug专案测试轮数排行榜(Top10)',
                    position: 'center',
                    left: 'center'
                },
                dataset: [
                    {
                        dimensions: ['name', 'score'],
                        source: date1 ? date1 : []
                        // [
                        //     ['Acer', 314],
                        //     ['GBT ', 351],
                        //     ['Acer ', 287],
                        //     ['GBT', 219],
                        //     ['inno', 253],
                        //     ['IO', 100],
                        //     ['inno ', 165],
                        //     ['泰坦/001', 318],
                        //     ['泰坦/002 ', 366],
                        //     ['IO ', 376]
                        // ]
                    },
                    {
                        transform: {
                            type: 'sort',
                            config: { dimension: 'score', order: 'desc' }
                        }
                    }
                ],
                xAxis: {
                    triggerEvent: true, // 开启坐标轴的标签响应和触发鼠标事件
                    type: 'category',
                    axisLabel: {
                        interval: 0,
                        rotate: 25,
                        formatter: function (value) {
                            var res = value;
                            if (res.length > 11) {
                                res = res.substring(0, 10) + "..";
                            }
                            return res;
                        },
                    },

                },
                yAxis: {},
                series: {
                    type: 'bar',
                    encode: { x: 'name', y: 'score' },
                    datasetIndex: 1,
                    label: {
                        show: true,
                        position: 'top',
                        valueAnimation: true
                    }
                }
            };

            myChart1.setOption(option1);
            extension(myChart1);
        },
        initEChart2(date1, date2) {

            var myChart2 = echarts.init(document.getElementById('chart2'))

            const option2 = {
                title: {
                    text: '项目专案异常结案状况统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '8%',
                    left: 'center',
                    data: date1 ? date1 : []
                    //  [
                    //     'A案',
                    //     'B案',
                    //     'C案',
                    //     'S案',
                    // ]
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        data: date2 ? date2 : [],
                        // [
                        //     { value: 1048, name: `A案` },
                        //     { value: 735, name: 'B案' },
                        //     { value: 580, name: 'C案' },
                        //     { value: 484, name: 'S案' },
                        // ]
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                    }
                ]
            };

            // myChart1.setOption(option1);
            myChart2.setOption(option2);
        },
        getProjectLevelDate() {
            getProjectLevelCount().then(res => {
                //   console.log(res)
                const date1 = []
                const date2 = res.data
                for (let res of date2) {
                    date1.push(res.name)
                }
                this.initEChart2(date1, date2)
            })
        },
        getProjectCustomerDate() {
            getProjectCustom().then(res => {
                this.customer = res.data ? res.data : []
            })
        },
        // 销毁Echarts
        destoryChar1() {
            if (echarts.getInstanceByDom(document.getElementById('chart1'))) {
                echarts.dispose(document.getElementById('chart1'))
            }
        },
        getProjectLevelTestDate() {
            getProjectLevelTest(this.param).then(res => {
                // console.log(res)
                this.destoryChar1()
                this.initEChart1(res.data)
            })
        },
        selectChange(event) {
            // console.log(event)
            this.param.customs = event
            this.getProjectLevelTestDate()
        },
        clearSelect() {
            this.checkboxGroup2 = []
            this.param.customs = []
            this.getProjectLevelTestDate()
        }
    },
};
</script>

<style scoped>

.total_card_num{
    height: 130px;
    border-radius: 15px;
    margin-bottom: 5px;
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    cursor: pointer;
  }
  
  .card_num_bottom{
    margin-top:38px;
    width:100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 12px;
  
  }
  
           
  .card_item_title{
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  
  .card_item_num{
    margin-top: 30px;
  }

  ::v-deep .table_header_row{
    background-color:#ffffff !important;
  
  }
</style>
